.nova-input {
  display: inline-block;
  vertical-align: top;

  &:focus-within {
    position: relative;
  }

  &:not(.nova-input-disabled):not(.nova-input-readonly) {
    .nova-input-text {
      &:hover,
      &:focus {
        + .nova-input-border {
          border: var(--nova-border-primary);
        }
      }

      &:focus {
        + .nova-input-border {
          box-shadow: var(--nova-shadow-primary);
        }
      }
    }
  }
}

.nova-input-disabled {
  opacity: 0.5;
  cursor: not-allowed;

  .nova-input-text {
    cursor: not-allowed;
  }
}

.nova-input-text {
  font-family: var(--nova-font-sans-serif);
  font-size: var(--nova-font-size);
  line-height: var(--nova-line-height);
  height: 30px;
  padding: 5px 10px;
  width: 200px;
  vertical-align: top;
  border: none;
  background: none;
  color: var(--nova-color-font);
  border-radius: var(--nova-radius);

  &:focus {
    outline: none;
  }
}

.nova-input-border {
  height: 30px;
  pointer-events: none;
  margin-top: -30px;
  background-color: var(--nova-color-bg-component);
  border-radius: var(--nova-radius);
  border: var(--nova-border);
  transition: var(--nova-transition-component);
}
